<template>
  <div class="analytics-card">
    <div class="month-label">Overall Performance</div>
    <!-- 图表部分 -->
    <div class="chart-container">
      <PieChart
        :option="optionPie"
        :height="'1.15rem'"
        :width="'1.6rem'"
      ></PieChart>
    </div>
  </div>
</template>

<script setup>
// import apiUser from '@/api/modules/user'
import PieChart from "@components/common/PieChart.vue";

// async function getRevies() {
//   const res = await apiUser.reviews()
//   console.log(res, '返回的数据')
//   const sources = res.map(item => item.source)
//   console.log(sources, '这是来源')
//   // 去重
//   const uniqueSources = [...new Set(sources)];
//   console.log(uniqueSources, '这是最终来源')
// }
// getRevies()

const optionPie = {
  legend: {
    top: "5%",
    left: "center",
  },
  graphic: [
    {
      type: "text",
      left: "center",
      top: "40%",
      style: {
        text: "9.23",
        textAlign: "center",
        fill: "#000",
        fontSize: 24,
        fontWeight: "bold",
      },
    },
    // 第二个 graphic 元素，显示第二行文字
    {
      type: "text",
      left: "center",
      top: "60%",
      style: {
        text: " Performance",
        textAlign: "center",
        fill: "#8F8F8F", // 改变文字颜色
        fontSize: 12, // 改变文字大小
        fontWeight: "normal",
      },
    },
  ],
  series: [
    {
      name: "Access From",
      type: "pie",
      top: "0%",
      left: "0%",
      bottom: "0%",
      radius: ["65%", "90%"],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 15,
        borderColor: "#fff",
        borderWidth: 10,
      },
      label: {
        show: true,
        formatter: function (params) {
          return `${params.name} ${Math.floor(params.percent)}%`;
        },
        position: "outside",
        padding: [0, -30],
        style: {
          color: "#000 !important", // 使用 !important 强制应用颜色样式
          fontSize: 12,
          fontWeight: "normal",
        },
      },
      labelLine: {
        show: false,
        labelStyle: {
          color: "#000 !important", // 也可以在这里设置 labelLine 的颜色样式
          fontSize: 12,
          fontWeight: "normal",
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: "bold",
          color: "#000",
        },
      },
      data: [
        { value: 300, itemStyle: { color: "#CE4049" } },
        { value: 600, itemStyle: { color: "#EFB82C" } },
        { value: 300, itemStyle: { color: "#2FAA68" } },
      ],
    },
  ],
};
</script>

<style scoped lang="scss">
.analytics-card {
  // background: pink;
  height: 100%;
  height: 200px;
  box-sizing: border-box;
  // padding-top: 10px ;
  flex-direction: column;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .month-label {
    margin-top: 10px;
    height: 30px; // 固定标题高度
    color: #454545;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .chart-wrapper {
    flex: 1; // 关键：占据剩余空间
    min-height: 0; // 防止溢出
    width: 100%;
    position: relative;
    flex-shrink: 0; // 禁止收缩，保持图表固有尺寸

    // 图表容器样式
    .chart-container {
      flex: 1;
      position: relative;
    }
  }
}
</style>
